<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      margin: 150px auto;
      width: 900px;
    }

  </style>
</head>
<body>
  <div id="app" class="content">
    <input type="text" v-model="message" placeholder="edit me">
    <p>message is {{message}}</p>

    <span>Multiline message is:</span>
    <p style="white-space: pre">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>

    <input id="checkbox" type="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>
    <br>
    <br>
    <br>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    <br>
    <br>
    <br>

    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
    <br>
    <br>
    <br>

    <select v-model="selected">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
    <br>
    <br>
    <br>

    <select v-model="selected2" multiple style="width: 50px">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected2 }}</span>
    <br>
    <br>
    <br>

    <select v-model="selected3">
      <option v-for="option in options" v-bind:value="option.value">
        {{option.text}}
      </option>
    </select>
    <span>Selected: {{ selected3 }}</span>
  </div>

  <div id="app2" class="content">
    <input
      type="checkbox"
      v-model="toggle"
      v-bind:true-value="a"
      v-bind:false-value="b"
    >
    <span>toggle: {{ toggle }}</span>

    <br>
    <br>
    <br>
    <input type="radio" v-model="pick" v-bind:value="c">
    <span>toggle: {{ toggle }}</span>
    <br>
    <br>
    <br>
    <select v-model="selected4" class="" name="">
      <option v-bind:value="{number: 123}">123</option>
    </select>
    <span>number: {{ selected4.number }}</span>

    <br>
    <br>
    <br>
    <input type="text" v-model="msg">
    <span>msg: {{ msg }}</span>

    <br>
    <br>
    <br>
    <input type="text" v-model.number="age">
    <span>age: {{ age }}</span>

    <br>
    <br>
    <br>
    <input type="text" v-model.trim="msg2">
    <span>msg2: {{ msg2 }}</span>
  </div>

  <script src="../js/lib/vue.js"></script>
  <script src="../js/lib/art-template.js"></script>
  <script src="../js/lib/jquery-2.1.1.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        selected: null,
        selected2: [],
        selected3: 'C',
        toggle: "a",
        options: [
          {text: 'one', value: 'A'},
          {text: 'two', value: 'B'},
          {text: 'three', value: 'C'},
          {text: 'fore', value: 'D'},
        ],
        picked: '',
        checkedNames: [],
        message: '',
        checked: false
      }
    });

    // 这里有个坑，如果要绑定其他值，就必须将其他值声明在data里面声明
    var app2 = new Vue({
      el: "#app2",
      data: {
        a: 'aaaaa',
        b: 'bbbb',
        toggle: '',
        msg: '',
        c: 'cccc',
        pick: '',
        selected4: ''
      }
    });
  </script>
</body>
</html>
